<template>
  <div class="home overflowY">
    <div class="PageContent" v-loading="loading">
      <div class="PageItem">
        <el-row class="paddingleft2em" style="height: 550px">
          <div class="number">
            <h1>无锡殡仪馆</h1>
            <h1 style="margin-top: 30px; font-size: 35px">
              未租数量{{ DepositCaseQuantity.notRentAmount }}
            </h1>
          </div>
          <div class="data">
            <ul>
              <li>
                <div style="background: #51cddf">1</div>
              </li>
              <li>
                <div style="background: #40bba6">
                  <h3>{{ DepositCaseQuantity.haveRentAmount }}</h3>
                  <h3>已租数量</h3>
                </div>
              </li>
              <li>
                <div style="background: #a749b4">3</div>
              </li>
              <li>
                <div style="background: #a68732">4</div>
              </li>
              <li>
                <div style="background: #818086">
                  <h3>{{ DepositCaseQuantity.totalQuantity }}</h3>
                  <h3>总数量</h3>
                </div>
              </li>
            </ul>
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import * as Type from "@/api/service";
import { dataFormate, dataFormatetmd } from "@/utils/index";
export default {
  name: "RegisterOverviewMapQuery",
  props: {
    //自定义模板清除属性
    clearable: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      loading: false,
      DepositCaseQuantity: {
        notRentAmount: "",
      },
      //按钮权限
      //业务编码
    };
  },
  created() {},
  mounted() {
    this.ReadData();
  },
  computed: {
    //计算
  },

  methods: {
    //数据读取
    ReadData() {
      this.loading = true;
      Type["loadDepositCaseCaseQuantity"]()
        .then((response) => {
          const { data } = response;
          if (!data) {
            this.loading = false;
            this.$message("数据读取失败");
            return;
          }
          this.DepositCaseQuantity = data;

          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
.number {
  height: 300px;
  width: 500px;
  background-color: yellow;
  border-radius: 20px;
  font-size: 50px;
  padding-left: 40px;
  padding-top: 40px;
}
.data {
  /* height: 300px; */
  /* width: 500px; */
}
.data ul li {
  float: left;
}
.data ul li div {
  height: 100px;
  width: 140px;
  margin-left: 20px;
  margin-top: 300px;
  background-color: #666;
  border-radius: 20px;
}
.data div {
  color: aliceblue;
  padding-top: 20px;
  padding-left: 5px;
}
.w1230 {
  width: 72.5vw !important;
  min-width: 40px !important;
}

.w425 {
  width: 25.6vw;
  min-width: 40px;
}
.w50 {
  width: 57vw;
  min-width: 40px;
}
.letter2 {
  letter-spacing: 5px;
}

.el-input__inner {
  border: none;
}
</style>
